<template>
 <div>
    <CloudRow>
      <CloudCol :span="8">
        col-8
      </CloudCol>
      <CloudCol :span="8" :offset="8">
        col-8
      </CloudCol>
    </CloudRow>
    <CloudRow>
      <CloudCol :span="6" :offset="6">
        col-6 col-offset-6
      </CloudCol>
      <CloudCol :span="6" :offset="6">
        col-6 col-offset-6
      </CloudCol>
    </CloudRow>
    <CloudRow>
      <CloudCol :span="12" :offset="6">
        col-12 col-offset-6
      </CloudCol>
    </CloudRow>
  </div>
</template>
<script>
export default {
  title: '7.左右偏移 ',
  subTitle: '使用 offset 可以将列向右侧偏。例如，:offset="4" 将元素向右侧偏移了 4 个列（column）的宽度。',
  data() {
    return {}
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.ant-row {
  margin-bottom: 20px;
  color: #ffffff;
  text-align: center;
}
.ant-row-flex > div:not(.gutter-row):nth-child(odd),
.ant-row > div:not(.gutter-row):nth-child(odd),
.ant-row-flex > div:not(.gutter-row):nth-child(odd),
.ant-row > div:not(.gutter-row):nth-child(odd) {
  background: rgba(0, 160, 233, 0.7);
}
.ant-row-flex > div:not(.gutter-row),
.ant-row > div:not(.gutter-row),
.ant-row-flex > div:not(.gutter-row),
.ant-row > div:not(.gutter-row) {
  background: #00a0e9;
  padding: 16px 0;
}
</style>